<template>
  <div>
    <!-- 上半部分的背景图 -->
    <div>
      <div class="top" style="height: 430px"></div>
      <!-- 导航栏 -->
    </div>
    <!-- 下半部分的内容 -->
    <div>
      <div class="center" style="width: 1000px; margin: 0 auto">
        <!-- 汽车群充电解决方案图标 -->
        <div class="top_icon">
          <p><img src="../../public/solution/10002.png" alt="" /></p>
          <i style="margin-bottom: 10px">Our Solution</i>
          <i>汽车群充电解决方案</i>
        </div>
        <!-- 汽车群充电解决方案具体方案 -->
        <div class="bottom_icon">
          <!-- 左边 -->
          <div class="bottom_icon_a" style="width: 10%">
            <div class="active">
              <!-- <span>大巴车</span> -->
              <router-link to="/solution/daba">
                <img src="../../public/solution/10004.png" alt="" />
                <p>大巴车</p>
              </router-link>
            </div>
            <div>
              <router-link to="/solution/ChuZu"
                ><img src="../../public/solution/10006.png" alt="" />
                <span>出租车</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/WeiGongJiao"
                ><img src="../../public/solution/10008.png" alt="" />
                <span>微公交</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/XiaoQu"
                ><img src="../../public/solution/10010.png" alt="" />
                <span>住宅小区</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/QiShiYe"
                ><img src="../../public/solution/10011.png" alt="" />
                <span>企事业单位</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/WeiKeTing"
                ><img src="../../public/solution/10012.png" alt="" />
                <span>城市微客厅</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/CheKu"
                ><img src="../../public/solution/10014.png" alt="" />
                <span>立体车库</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/ZongHe"
                ><img src="../../public/solution/10015.png" alt="" />
                <span>城市综合</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/KuaiChongZhan"
                ><img src="../../public/solution/10017.png" alt="" />
                <span>公交快充站</span></router-link
              >
            </div>
            <div>
              <router-link to="/solution/GengXin"
                ><img src="../../public/solution/10018.png" alt="" />
                <span>即将更新</span></router-link
              >
            </div>
          </div>
          <!-- 右边 -->
          <div style="width: 90%; margin: 30px 0 0 30px">
            <router-view></router-view>
          </div>
        </div>
      </div>
      <!-- 底部导航栏 -->
      <div class="DIBUdhl" style="padding-top: 100px">
        <div>
          <a href="#">产品与服务</a> | <a href="#">联系我们</a> |
          <a href="#">加入我们</a> | <a href="#">帮助</a> |
          <a href="#">监察举报</a> | <a href="#">意见反馈</a> |
          <a href="#">隐私政策</a> |
          <a href="#">关于特来电</a>
        </div>
        <div style="margin-top: 10px">
          <span>Copyright © 2015 - 2022 特来电新能源股份有限公司</span> |
          <a href="#">营业执照</a> | <a href="#">鲁ICP备14031144号-3</a> |
          <a href="#">增值电信业务经营许可证：合字B2-20210028</a>
        </div>
        <div class="a">
          <img src="../../public/solution/10019.png" />
          <span>鲁公网安备 37021202000852号</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<script>
        const items = document.querySelectorAll('.-bottom_icon_a>div')
        items.forEach(item => item.onclick = function(){
            items.forEach(a => a.classList.remove('active'))
            this.classList.toggle('active')
        })
</script>


<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.top {
  background-image: url("../../public/solution/10020.jpg");
  // background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top;
  background-size: auto;
  user-select: none;
}
.top_icon {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  margin-top: 30px;
}
.bottom_icon {
  display: flex;
  margin: 0 0 100px;
  .bottom_icon_a > div {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #dcdcdc;
  }
  .bottom_icon_a > div:hover {
    background-color: skyblue;
  }
  .bottom_icon_a > div.active {
    background-color: orange;
  }
}

.DIBUdhl {
  background-color: rgb(55, 55, 55);
  height: 150px;
  color: white;
  font-size: 14px;
  > div > a {
    display: inline-flex;
    margin: 0 10px;
    color: white;
  }
  > div > a:hover {
    text-decoration: underline;
  }
  > .a {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}
a {
  color: black;
}
</style>